<template>
  <div>
    <back-nav
      :leftArrow="true"
      :title="'安全中心'"
      :leftText="'返回'"
    ></back-nav>
    <div class="palcehode"></div>
    <div class="safeBox">
      <div class="box">
        <div class="amend">
          <div class="text">修改密码</div>
          <div class="icon">
            <img
              src="../assets/images/right.png"
              class="auto-img"
              @click="amendPass"
            />
          </div>
        </div>
        <div class="write">
          <div class="text">注销账号</div>
          <div class="icon">
            <img
              src="../assets/images/right.png"
              class="auto-img"
              @click="writeInfo"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="exit">
      <van-button type="primary" size="large" @click="exitLogin"
        >退出登录</van-button
      >
    </div>
    <van-popup
      v-model="passFlag"
      round
      position="bottom"
      style="height: 42%; padding-top: 4px"
    >
      <div class="amendPasscz">
        <div class="passBox">
          <div>修改密码</div>
          <div class="passIcon">
            <img
              src="../assets/images/close.png"
              class="auto-img"
              @click="close"
            />
          </div>
        </div>
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          :type="isOpen ? 'text' : 'password'"
          name="oldPassword"
          label="旧密码"
          autocomplete="off"
          placeholder="旧密码(首字符必须为字母)"
          :right-icon="isOpen ? 'eye-o' : 'closed-eye'"
          @click-right-icon="togglePasswordStatus"
          :rules="[
            { required: true, message: '请填写用户名' },
            {
              pattern: passwordReg,
              message: '支持数字字母下划线组合并且以字母开头',
            },
          ]"
        />
        <van-field
          v-model="password"
          :type="isOpen2 ? 'text' : 'password'"
          name="password"
          label="新密码"
          autocomplete="off"
          placeholder="新密码(首字符必须为字母)"
          :right-icon="isOpen2 ? 'eye-o' : 'closed-eye'"
          @click-right-icon="togglePasswordStatus2"
          :rules="[
            { required: true, message: '请填写密码' },
            {
              pattern: passwordReg,
              message: '支持数字字母下划线组合并且以字母开头',
            },
          ]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
import backNav from "../components/BackNav.vue";
import { Dialog } from "vant";
export default {
  name: "Safety",
  data() {
    return {
      passFlag: false,
      username: "",
      password: "",
      //验证密码(数字字母下划线组合并且以字母开头6-16位)
      passwordReg: /^[A-Za-z]\w{5,15}$/,
      isOpen: false,
      isOpen2: false,
    };
  },
  components: {
    backNav,
  },
  methods: {
    //   退出登录
    exitLogin() {
      Dialog.confirm({
        title: "退出登录",
        message: "一旦退出登录将无法享受各种特权了哦",
      })
        .then(() => {
          this.axios({
            method: "post",
            url: "/logout",
          })
            .then((res) => {
              console.log(res);
              if (res.data.code == "F001") {
                window.sessionStorage.removeItem("token");
                this.$toast(res.data.msg);
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    // 修改密码
    amendPass() {
      console.log("修改密码");
      this.passFlag = true;
    },
    // 注销账号
    writeInfo() {
      Dialog.confirm({
        title: "注销账号",
        message: "是否确定注销账号,一旦注销无法恢复",
      })
        .then(() => {
          this.axios({
            url: "/destroyAccount",
            method: "post",
          })
            .then((res) => {
              console.log(res);
              if ((res.data.code = "G001")) {
                window.sessionStorage.removeItem("token");
                this.$toast(res.data.msg);
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    close() {
      this.passFlag = false;
    },
    togglePasswordStatus() {
      this.isOpen = !this.isOpen;
    },
    togglePasswordStatus2() {
      this.isOpen2 = !this.isOpen2;
    },
    onSubmit(values) {
      this.axios({
        method: "post",
        url: "/updatePassword",
        data: {
          password: values.password,
          oldPassword: values.oldPassword,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code === "E003") {
            this.$toast(res.data.msg);
          } else {
            this.username = "";
            this.password = "";
            window.sessionStorage.removeItem("token");
            this.$toast("修改密码成功,请重新登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/base.less");
.palcehode {
  height: 100px;
  width: 100%;
  background-color: @mainColor;
}
.safeBox {
  padding: 0px 10px;
  transform: translateY(-20px);
  .box {
    background-color: #fff;
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
    padding: 10px 13px;
    .amend {
      height: 50px;
      display: flex;
      align-items: center;
      color: #3f3c3c;
      font-size: 12.5px;
      border-bottom: 1px solid #dbcdcd;
      .icon {
        height: 20px;
        width: 20px;
        margin-left: auto;
      }
    }
    .write {
      height: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      color: #3f3c3c;
      font-size: 12.5px;
      .icon {
        height: 20px;
        width: 20px;
        margin-left: auto;
      }
    }
  }
}
.exit {
  width: 94%;
  margin: 80px auto;
}
.amendPasscz {
  height: 85px;
  padding: 0px 10px;
  .passBox {
    height: 60px;
    font-size: 14px;
    display: flex;
    align-items: center;
    .passIcon {
      height: 20px;
      width: 20px;
      margin-left: auto;
    }
  }
}
/deep/ .van-button--primary {
  height: 45px;
  border-radius: 20px;
  background-color: @mainColor;
  border-color: @mainColor;
}
/deep/.van-button--info {
  background-color: @mainColor;
  margin-top: 40px;
}
</style>